import React, { memo } from 'react'
import { SearchOutlined, TableOutlined, UnorderedListOutlined } from "@ant-design/icons";
import { Button, Input, Segmented } from "antd";
import './style.less'
import { RESULT_SHOW_MODE, RESULT_SHOW_MODE_DICT } from "@/constant/icons";


export const ResultHeader = memo(({
    info = '字段信息',
    total = 0,
    select = 0,
    mode,
    onChange = (e) => { },
    onSearch = (e) => { }
}) => {
    return <div className="result-title">
        <div className="result-left">
            <span className="result-info">{info}</span>
            <div className="result-summary">
                共 {total} 个字段，已选 {select} 个
            </div>
        </div>
        <div className="result-right">
            <Segmented
                options={RESULT_SHOW_MODE}
                onChange={onChange}
                defaultValue={mode}
            />
            <div className="result-search">
                <Input prefix={<SearchOutlined />}
                    placeholder="请输入字段名称"
                    onChange={e => onSearch?.(e.target.value)}
                    disabled = {mode !== RESULT_SHOW_MODE_DICT.field}
                    allowClear
                />
            </div>
        </div>

    </div>
})